<template>
<div style="width:100%;height: 1210px;">
  <div style="width:95%;margin:0 auto;" class="box-content">
      <!-- 头部 -->
    <div class="box-top" style="display:flex">
      <div  style="width:40%" class='box-top-left'>
        <div class="daohang">
      <i style="font-size:20px;color:#999;line-height:60px;float: left;"  class="el-icon-s-home"></i>  
      <el-breadcrumb >
      <el-breadcrumb-item style="font-size:15px;color:#999; line-height:60px; margin-left:8px;display:block;float: left;">首页 </el-breadcrumb-item>
      <i style="font-size:15px;line-height:63px;margin-left:-3px;float: left" class="el-icon-folder-opened"></i>  
      <el-breadcrumb-item style="font-size:15px;line-height:64px; margin-left:8px;display:block;float: left;">分组管理</el-breadcrumb-item>
    </el-breadcrumb>
      </div>
    </div>
  </div>
  </div>
  <!-- 内容 -->
<div class="middle" >
<button @click="add()">添加分组</button>

<div  class="table-box">
  <table style="border:1px solid rgba(221, 221, 221, 1)" width="75%"  border="1" cellspacing="0" align="center">
    <tr style="border:1px solid rgba(221, 221, 221, 1)" >
      <td  style="height:45px;background:rgba(239, 239, 239, 1);text-align:center;border:1px solid rgba(221, 221, 221, 1);width:180px">标签名称</td>
      <td style="border:1px solid rgba(221, 221, 221, 1);height:45px;background:rgba(239, 239, 239, 1);text-align:center;width:100px">会员数</td>
      <td style="border:1px solid rgba(221, 221, 221, 1);height:45px;background:rgba(239, 239, 239, 1);text-align:center;width:180px">标签描述</td>
      <td style="border:1px solid rgba(221, 221, 221, 1);height:45px;background:rgba(239, 239, 239, 1);text-align:center;width:180px">操作</td>
    </tr>
    <tr  v-for="item in List" :key="item.id" style="position:relative">
      <td style="height:55px;border:1px solid rgba(221, 221, 221, 1)">
      <span style="display:block;text-align:center">{{item.title}}</span></td>
      <td style="border:1px solid rgba(221, 221, 221, 1)"><span style="display:block;text-align:center">{{item.count}}</span></td>
      <td style="border:1px solid rgba(221, 221, 221, 1)"><span style="display:block;text-align:center">{{item.describe}}</span></td>
    <td style="border:1px solid rgba(221, 221, 221, 1)"><span @click="del(item)" style="display:block;text-align:center;color:rgba(25, 144, 255, 100)">删除组别</span></td>
    </tr>
 </table>
</div>
</div>

<div class='popContainer' v-if="isFalse" >
  <div class="popContainer-box1" style="  position: relative;  ">
                    <div style="width:100%;height:50px;background:#F4F5F9;display:flex;    justify-content: space-between;" class="popContainer-box-top">
                      <span style="font-size:14px;display:block;margin-left:20px;margin-top:10px;">添加标签组</span>
                      <span @click="cancel()" style="font-size:20px;display:block;margin-right:20px;margin-top:8px">❌</span>
                    </div>
                    <div  style="width:100%;height:400px;">
                      <el-form ref="form"  label-width="80px" style="margin-left:70px;margin-top:60px; width:70%">
  <el-form-item label="标签名称" >
    <el-input v-model="title"  ></el-input>
  </el-form-item>
  <el-form-item label="标签描述">
    <el-input v-model="value" type="textarea" ></el-input>
  </el-form-item>
  <el-form-item>
    <el-button type="primary" @click="onSubmit">提交</el-button>
    <el-button>取消</el-button>
  </el-form-item>
</el-form>

                    </div> 
                    </div>         
                    </div>
                    </div>
</template>
<style lang="scss" scoped>
.middle{
  width: 100%;
  height: 500px;
  button{
    width: 80px;
    height: 30px;
    background: white;
    border: 1px solid #BBBBBB;
    margin: 0 60px;
    border-radius: 5px;
  }
  .table-box{
    width: 90%;
    margin: 40px 60px;
  }
}


.popContainer{
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background: rgba(0,0,0,0.6);
      .popContainer-box{
        width: 50%;
        background: white;
        height: 600px;
        margin-left: 15%;
        margin-top:13%;
      }
      .popContainer-box1{
        width: 45%;
        height: 450px;
        background: white;
        margin-left: 20%;
        margin-top:15%;
      }
    }

</style>
<script>
import {getgrouping,addgrouping,delgrouping} from '../../api/index'

export default{
  data(){
    return{
      List:[],
      isFalse:false,
      title:'',
      value:''
    }
  },
  methods:{
    getList(){
      getgrouping().then(res=>{
        this.List=res.data
      })
    },
    add(){
       this.isFalse=true
     },
     cancel(){
      this.isFalse=false

     },
     onSubmit() {
      let a={
        title:this.title,
        describe:this.value,
        count:'10'
      }
      addgrouping(a).then(res=>{
        this.getList()
        this.isFalse=false
      })
        console.log(this.title);
        console.log(this.value);
      },
      del(item){
        delgrouping({id:item.id}).then(res=>{
          this.getList()
        })
      }
  },
  created(){
    this.getList()
  }
}
</script>
